<template>
	<div id="list">
		<!--头部信息-->
		<div class="head">
			<!--背景图片-->
			<div class="bgimg">
				<img :src="type=='songlist'?cdlist.logo:topinfo.pic_album" />
			</div>
			<!--信息-->
			<div class="content clearfix">
				<div class="img fl">
					<img :src="type=='songlist'?cdlist.logo:topinfo.pic_album" />
				</div>
				<div class="info fl">
					<p class="dissname">{{type=='songlist'?cdlist.dissname:topinfo.ListName}}</p>
					<p class="author">
						<span class="portrait">
							<img :src="cdlist.headurl"/>
						</span>
						<span class="nickname">{{cdlist.nickname}}</span>
					</p>
					<p class="accessnum">播放量：{{accessnum()}}万</p>
				</div>
			</div>

			<!--选项按钮-->
			<div class="opt-fixed">
				<div class="opt-btn" v-show="!opt">
					<button @click="play()"><i class="iconfont icon-triangle-right"></i>播放全部</button>
				</div>
				<div class="mini-play" v-show="opt">
					<div class="play-box">
						<span class="prev" @click="prev()"><i class="iconfont icon-shangyishou"></i></span>
						<span class="play" @click="play()"><i class="iconfont" :class="State=='playing'?'icon-bofang':'icon-bofang1'"></i></span>
						<span class="next" @click="next()"><i class="iconfont icon-xiayishou"></i></span>
					</div>
					<!--正在播放的歌曲所属的歌手-->
					<div class="singer">
						<img :src="SingerImg" />
					</div>
				</div>
			</div>
		</div>

		<!--歌单-->
		<div class="list-box">
			<div class="count-box clearfix">
				<span class="fl">歌单 共{{type=='songlist'?cdlist.cur_song_num:toplist.length}}首</span>
				<span class="fr">收藏 <i class="iconfont icon-xin"></i></span>
			</div>
			<!--列表-->
			<ul class="list">
				<li v-if="type=='songlist'" v-for="(item,index) in cdlist.songlist" @click="play(index)" :key="index"> 
					<h3 class="textOverflow"><span>{{index}}. </span>{{item.songname}}</h3>
					<p class="textOverflow"><span>{{item.singer[0].name}}</span> · <span>{{item.albumname}}</span></p> 
					<!--音乐跳动符动画 S-->
					<div class="music-jump" v-show="index==Index&&State=='playing'?true:false">
						<div class="box">
							<div class="pillar"></div>
						</div>
						<div class="box">
							<div class="pillar"></div>
						</div>
						<div class="box">
							<div class="pillar"></div>
						</div>
					</div>
					<!--音乐跳动符动画 E-->
				<!-- </li> -->
				<li v-if="type=='topsong'" v-for="(item,index) in toplist" @click="play(index)" :key="index">
					<h3 class="textOverflow"><span>{{index+1}}. </span>{{item.data.songname}}</h3>
					<p class="textOverflow"><span>{{item.data.singer[0].name}}</span> · <span>{{item.data.albumname}}</span></p>
					<!--音乐跳动符动画 S-->
					<div class="music-jump" v-show="index==Index&&State=='playing'?true:false">
						<div class="box">
							<div class="pillar"></div>
						</div>
						<div class="box">
							<div class="pillar"></div>
						</div>
						<div class="box">
							<div class="pillar"></div>
						</div>
					</div>
					<!--音乐跳动符动画 E-->
				</li>
			</ul>
			<!--加载更多-->
			<div class="load-more">点击加载更多歌曲</div>
			<!--底部标题-->
			<div class="footer-title"><span>歌单简介</span></div>
			<!--歌单简介-->
			<div class="desc" v-html="cdlist.desc"></div>
		</div>

		<!--logo落款-->
		<div class="footer">
			<img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg?max_age=2592000" />
			<p>QQ音乐</p>
		</div>
		<!--loading-->
		<div class="load-box" v-if="loadState">
			<div class="loading">
				<mt-spinner type="fading-circle" color="#282828" :size="66"></mt-spinner>
			</div>
		</div>
	</div>

	<!--var albmMid = "001wUwND10osKJ"-->
	<!--var albmPic = "https://y.gtimg.cn/music/photo_new/T002R300x300M000"+ albmMid +".jpg?max_age=2592000"-->

	<!--歌手拼接链接-->
	<!--https://y.gtimg.cn/music/photo_new/T001R150x150M000${albmMid}.jpg?max_age=2592000-->

	<!--歌手拼接内容-->
	<!--0025NhlN2yWrP4-->

	<!--完整的链接-->
	<!--https://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg?max_age=2592000-->

	<!--路径-->
	<!--cdlist.songList.singer.mid-->

</template>

<script>
	import api from '../js/musicAPI.js';

	export default {
		data: function() {
			return {
				cdlist: {},
				songid: [],
				player: {},
				//选项开关
				opt: false,
				State: "",
				Index: "-1",
				SingerImg: "",
				loadState: true,
				topinfo:{},
				type:"",
				toplist:[]
			}
		},
		created: function() {
			//存储指针方向
			let that = this;
			//获取地址id值
			let id = this.$route.query.mid;
			//获取url上的type值
			let type = this.$route.query.type;
			this.type = type;
			/**
			 * 1.把获取到的id，通过api对象里的getSongList方法赋予形参；
			 * 2.去请求该id的歌单并返回具体数据；
			 * 10.通过then()方法紧接返回数据；
			 * 11.把返回的数据设置该数据渲染。
			 */

			/**
			 * 
			 *根据url传入的id和类型请求不同的接口 
			 * 
			 */ 

			switch(type){
				case "songlist":

					//获取id对应歌单
					api.getSongList(id).then((res) => {
						console.log(res)
						this.cdlist = res.cdlist[0];
						that.loadState = false;
						//把歌曲的id存到一个数组里，方便调用
						this.songid = res.cdlist[0].songlist.map(function(item, index) {
							return item.songmid;
						});
					});
					break;
				case "topsong":
					// 排行榜歌单
					console.log("top")
					api.getTopSongs(id).then((res)=>{
						console.log(res)
						// 播放音乐的请求是get方式，url长度有限，因此限制50首
						this.toplist = res.songlist.slice(0,50);
						this.topinfo = res.topinfo;
						this.loadState = false;
						
						//把歌曲的id存到一个数组里，方便调用
						this.songid = this.toplist.map(function(item, index) {
							return item.data.songmid;
						});
					})

					break;
			}





			//初始化播放组件
			this.player = new QMplayer();
			//播放的回调
			this.player.on("play", function() {
				that.State = this.data.state;
				that.Index = this.data.index;
				that.SingerImg = "https://y.gtimg.cn/music/photo_new/T001R150x150M000" + this.data.song.singer[0].mid + ".jpg?max_age=2592000";
			});
			//暂停的回调
			this.player.on("pause", function() {
				that.State = this.data.state;
			});
			//播放错误的回调（暂停播放）
			this.player.on("error", function() {
				this.pause();
				console.log("播放错误，全部暂停");
				alert("这是vip歌曲，请充值")
			});
		},
		methods: {
			//播放
			play: function(index) {
				this.opt = true;
				this.player.play(this.songid, {
					index: index,
				});
			},
			//上一首
			prev: function() {
				this.player.playPrev();
			},
			//下一首
			next: function() {
				this.player.playNext();
			},
			//播放量保留一位小数，以万为单位
			accessnum: function() {
				let num = this.type=='songlist'? this.cdlist.visitnum:this.topinfo.listennum;
				return(num / 10000).toFixed(1);
			},
		},
		mounted: function() {
			//播放器卡片
			// let opt = document.querySelector('.opt-fixed'),
			// 	indexHead = document.querySelector('header'),
			// 	Top = opt.offsetTop + indexHead.offsetTop;

			// document.addEventListener('scroll', function() {
			// 	let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			// 	if(scrollTop >= Top) {
			// 		opt.classList.add('OptFixed');
			// 	} else if(scrollTop < Top) {
			// 		opt.classList.remove('OptFixed');
			// 	}
			// });
		},
		beforeDestroy:function(){
			this.player.pause();
		}
	}
</script>

<style lang="scss" scoped>
	@import "../scss/list";
</style>